$(function () {
    var render = function(){
        var key = lt.getUrlParams().key || ''
        //显示在搜索框架中
        $('.search_input').val(key)
        getProductListData({
            proName:key,//这一块很容易写错，一定要注意看清楚接口文档，不要写成key:key
            page:1,
            pageSize:10
        },function(data){
            // console.log(data)
            var htmlStr = template('productTpl',data)
            $('.lt_product').html(htmlStr)
        })
    }

    render();//初始化渲染

    /*2.当前页搜索*/
    $('.search_btn').on('tap', function () {
        //获取搜索框当中的按钮
        var key = $.trim($('.search_input').val());
        //判断是否输入了内容
        if(!key){
            mui.toast('请输入关键字')
            return false;
        }
        /*显示加载*/
        $('.lt_product').html('<div class="loading"><span class="mui-icon mui-icon-spinner"></span></div>');
        //通过关键字渲染数据
        getProductListData({
            proName: key,//这一块很容易写错，一定要注意看清楚接口文档，不要写成key:key
            page: 1,
            pageSize: 10
        }, function (data) {
            console.log(data)
            var htmlStr = template('productTpl', data)
            $('.lt_product').html(htmlStr)
        })
    });

    //3.排序展示
    $('[data-type]').on('tap',function(){
        //当前点击的元素
        var $this = $(this)
        //换箭头
        if($this.hasClass('now')){
            var arrow = $(this).find('span');
            console.log(arrow)
            if(arrow.hasClass('fa-angle-down')){
                arrow.removeClass('fa-angle-down').addClass('fa-angle-up');
            }else{
                arrow.removeClass('fa-angle-up').addClass('fa-angle-down')
            }
        }else{
            $('[data-type].now').removeClass('now');
            $this.addClass('now')
        }

        //获取排序方式
        var type = $('[data-type].now').attr('data-type')
        var value = $('[data-type].now').find('span').hasClass('fa-angle-down')?1:2;//1代表升序 2代表降序
        var order = {};
        order[type] = value;
        
        //获取搜索框当中的按钮
        var key = $.trim($('.search_input').val());
        //判断是否输入了内容
        if(!key){
            mui.toast('请输入关键字')
            return false;
        }
        
        getProductListData($.extend({
            proName: key,
            page: 1,
            pageSize: 10
        },order), function (data) {
            console.log(data)
            var htmlStr = template('productTpl', data)
            $('.lt_product').html(htmlStr)
        })


    })

    mui.init({
        /*4.下拉刷新*/
        pullRefresh: {
            container: ".mui-scroll-wrapper",
            down: {
                callback: function () {
                    console.log('下载刷新一次');
                    var that = this;/*这个是下拉组件对象  对象当中含有终止下拉操作的方法*/
                    setTimeout(function(){
                        that.endPulldownToRefresh();
                    },1000)
                }
            },
            /*5.上拉加载*/
            up: {
                callback: function () {
                    console.log('上拉加载一次');
                    var that = this;/*这个是上拉组件对象  对象当中含有终止下拉操作的方法*/
                    setTimeout(function () {
                        that.endPullupToRefresh();
                    }, 1000);
                }
            }
        }
    });
});

//获取后台数据 商品列表数据
var getProductListData = function(params,callback){
    $.ajax({
        type: "get",
        url: "http://localhost:3000/product/queryProduct",
        data: params,
        dataType: "json",
        success: function (data) {
            setTimeout(function(){
                if(data.data.length == 0)mui.toast('没有相关商品')
                callback && callback(data)
            })
        }
    });
}